<div class="album-create album-edit ">
    <div class="head_title">
        <span class="center-news" ui-sref="main.album">专辑管理</span>
        <span class="news">/专辑创建</span>
    </div>

    <form class="form-horizontal content-margin w5c-form wp-20" style="padding-top: 40px" name="albumForm" novalidate w5c-form-validate>


            <div class="form-group personal-second">

                <label class="col-sm-3 control-label"><i class="red-icon">*</i>专辑封面：</label>

                <div class="col-sm-7 personal-head">
                        <span class="programCover_a">
                            <img width="100%" height="100%"ng-src="{{formData.albumCover}}">
                        </span>
                    <label>
                        <span class="mask-span">上传封面</span>
                        <input type="file"  style="display: none" id="fileInput" >
                    </label>

                    <div class="clear"></div>
                    <div style="margin: 2px 109px;position: absolute;top:73px;">
                        <input type="hidden" required ng-model="formData.albumCover" name="albumCover">
                    </div>
                    <span style="color: red;position: absolute;left: 124px;top: 76px;font-size: 12px">{{errorImg}}</span>
                </div>

            </div>

        <div style="color: #d5d5d5;font-size: 12px;top:-10px;left: 220px;position: relative" >（建议图片大小不超过5M，支持PNG/JPG/JPEG格式）</div>
            <div class="form-group personal-second">
                <label class="col-sm-3 control-label"><i class="red-icon">*</i>专辑名称：</label>
                <div class="col-sm-7 personal-head">
                    <input type="text" class="input" placeholder="专辑名称" ng-model="formData.albumName" name="albumName" required="" ng-maxlength="40" ng-minlength="1">
                </div>
            </div>



            <div class="form-group personal-second">
                <label class="col-sm-3 control-label"><i class="red-icon">*</i>专辑分类：</label>
                <div class="col-sm-7 personal-head">
                    <ui-select ng-model="categorySelected" theme="bootstrap" style="width: 140px;float: left" ng-change="categoryChange(categorySelected)">
                        <ui-select-match placeholder="请选择">{{$select.selected.categoryName}}</ui-select-match>
                        <ui-select-choices repeat="category in categories | filter: $select.search">
                            <span ng-bind-html="category.categoryName | highlight: $select.search"></span>
                        </ui-select-choices>
                    </ui-select>
                    <ui-select ng-model="$parent.channelSelected" theme="bootstrap" style="width: 140px;margin-left: 20px;float: left" ng-change="channelChange($parent.channelSelected)">
                        <ui-select-match placeholder="请选择">{{$select.selected.channelName}}</ui-select-match>
                        <ui-select-choices repeat="channel in channels | filter: $select.search">
                            <span ng-bind-html="channel.channelName | highlight: $select.search"></span>
                        </ui-select-choices>
                    </ui-select>
                   <div class="clear"></div>
                    <div>
                        <input type="hidden" required ng-model="channelSelected.channelId" name="channelName">

                    </div>
                </div>

            </div>

            <div class="form-group personal-second">
                <label class="col-sm-3 control-label">更新频率：</label>
                <div class="col-sm-7 personal-head">
                    <label class="btn btn-xs" ng-class="{on : formData.updateTimes == 71}" >
                        <input type="radio" class="hide" name="radioPay" ng-value="71" ng-model="formData.updateTimes" >不定期
                    </label>
                    <label class="btn btn-xs" ng-class="{on : formData.updateTimes == 72}"  >
                        <input type="radio" class="hide" name="radioPay" ng-value="72" ng-model="formData.updateTimes">每天
                    </label>
                    <label class="btn btn-xs" ng-class="{on : formData.updateTimes == 73}"  >
                        <input type="radio" class="hide" name="radioPay" ng-value="73" ng-model="formData.updateTimes">每周
                    </label>
                    <label class="btn btn-xs" ng-class="{on : formData.updateTimes == 74}"  >
                        <input type="radio" class="hide" name="radioPay" ng-value="74" ng-model="formData.updateTimes">每月
                    </label>

                </div>
            </div>
            <div class="form-group personal-second">
                <label class="col-sm-3 control-label">节目排序：</label>
                <div class="col-sm-7 personal-head">
                    <label class="btn btn-xs" ng-class="{on : formData.programSort == 61}" >
                        <input type="radio" class="hide" name="radioPay" ng-value="61" ng-model="formData.programSort" >正序
                    </label>
                    <label class="btn btn-xs" ng-class="{on : formData.programSort == 62}"  >
                        <input type="radio" class="hide" name="radioPay" ng-value="62" ng-model="formData.programSort">倒序
                    </label>
                </div>
            </div>
            <div class="form-group personal-three tag">
                <label class="col-sm-3 control-label"><i class="red-icon">*</i>通用标签：</label>
                <div class="col-sm-7 personal-head form_tag personal-head_a" >
                    <ui-select ng-model="$parent.commonTagsSelected" multiple theme="bootstrap" close-on-select="false" remove-selected="false">
                        <ui-select-match placeholder="最多选择5个标签">{{$item.commtagName}}</ui-select-match>
                        <ui-select-choices repeat="tag in commonTags | filter: { commtagName: $select.search }" group-by="'dimensionsName'">
                            <span ng-bind-html="tag.commtagName | highlight: $select.search"></span>
                        </ui-select-choices>
                    </ui-select>
                    <input type="number"  ng-model="commonTagsSelected.length" hidden name="channelSelected" max="5" min="1">

                </div>
            </div>
            <div class="form-group personal-second personal-three tag" ng-show="channelSelected.channelId">
                <label class="col-sm-3 control-label"><i class="red-icon">*</i>专用标签：</label>
                <div class="col-sm-7 personal-head personal-head_a" >
                    <ui-select ng-model="$parent.specialTagsSelected" multiple theme="bootstrap" close-on-select="false" remove-selected="false" style="width: 100%">
                        <ui-select-match placeholder="最多选择5个标签">{{$item.specialName}}</ui-select-match>

                        <ui-select-choices repeat="tag in specialTags | filter: { specialName: $select.search }" group-by="'dimensionsName'">
                            <span ng-bind-html="tag.specialName | highlight: $select.search"></span>
                        </ui-select-choices>
                    </ui-select>
                    <input type="number"  ng-model="specialTagsSelected.length" hidden name="speChannelSelected" max="5" min="1">

                </div>
            </div>
            <div class="form-group personal-second">
                <label class="col-sm-3 control-label">关键词：</label>
                <div class="col-sm-7 personal-head">
                    <input type="text" class="input long-input" placeholder="多个关键词之间，用逗号或分号或顿号做区隔" ng-model="formData.keyword" w5c-customizer="BaseValidations.checkKeyword(formData.keyword)" name="keyword" >

                </div>
            </div>
            <div class="form-group personal-second">
                <label class="col-sm-3 control-label"><i class="red-icon">*</i>主播：</label>
                <div class="col-sm-7 personal-head">
                    <input type="text" class="input long-input" placeholder="多个主播之间，用逗号或分号或顿号做区隔" ng-model="formData.anchorName" name="anchorName" w5c-customizer="BaseValidations.checkAnchorName(formData.anchorName)" >
                </div>
            </div>
            <div class="form-group personal-second">
                <label class="col-sm-3 control-label">原创：</label>
                <div class="col-sm-7 personal-head">
                    <input type="text" class="input long-input" placeholder="多个原创之间，用逗号或分号或顿号做区隔"   ng-model="formData.originalName" name="originalName" w5c-customizer="BaseValidations.checkKeywordA(formData.originalName)" >
                </div>
            </div>
            <div class="form-group personal-second">
                <label class="col-sm-3 control-label"><i class="red-icon">*</i>专辑简介：</label>
                <div class="col-sm-7 personal-head">
                    <textarea class=" long-input"  ng-model="formData.summary" name="summary" required ng-minlength="10" ng-maxlength="1000"></textarea>
                </div>
            </div>
            <div class="form-group personal-second">
                <label class="col-sm-3 control-label">上传节目：</label>
                <div class="col-sm-7 personal-head" style="padding-top: 5px">
                    <label for="audioFile" class="btn btn-primary">
                        选择音频
                    </label>
                    <span style="color: #CCCCCC;font-size: 12px">（仅可上传20个音频，每个大小范围0.5-150M，支持MP3、AAC格式）</span>
                    <div style="font-size: 12px" ng-if="image_a==true"  class="emailError">
                        {{imageMsg}}
                    </div>
                    <input type="file"  style="display: none" id="audioFile"   nv-file-select  uploader="uploaderAudio" multiple >


                    <table class="table table-bordered table-hover" style="margin-top: 10px;border: 1px solid #ddd!important;" ng-show="uploaderAudio.queue.length" >
                        <thead>
                        <tr>
                            <th>音频名称</th>
                            <th>大小</th>
                            <th>进度</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="item in uploaderAudio.queue" ng-class="{'red':item.isSuccess=='uploadFail'}">
                            <td><span ng-show="item.isSuccess=='uploadFail'">(上传失败)</span><span class="first-td">{{item.file.name}}</span></td>
                            <td>{{ item.file.size/1024/1024|number:2 }} MB</td>
                            <td>
                                <uib-progressbar value="item.progress">{{item.progress}}%</uib-progressbar>

                            </td>
                            <td><i class="fa fa-trash" aria-hidden="true" style="color: red"
                                   ng-click="item.remove();removeFile($index,item)"></i>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <label  class="btn btn-primary" ng-click="uploadAllAudio()" ng-show="uploaderAudio.queue.length" style="margin-top: 10px">
                        上传
                    </label>

                    <br>
                    <label style="margin-top: 10px" ng-show="uploaderAudio.queue.length">已选择{{uploaderAudio.queue.length}}条</label>

                </div>
            </div>


        <footer class="container-fluid foot-wrap">
            <div class="text-center" style="margin-bottom: 28px">
                <button class="btn btn-primary" type="button"  w5c-form-submit="submit()" ng-show="uploaderAudio.queue.length==list.length" ng-disabled="disabled">{{'确定'}}</button>
                <button class="btn btn-primary" type="button" ng-show="uploaderAudio.queue.length!=list.length">{{'等待上传完成'}}</button>

                <button type="button" class="btn ims-btn" ng-click="cancel()">取消</button>
            </div>
        </footer>

    </form>

</div>
